<template>
    <div>
        <went :title="title"></went>
        <div style="height: 45px;"></div>
         <van-skeleton title :row="3" v-show="status"/>
        <van-form @submit="onSubmit">
            <div style="text-align: center;">
                <h4><img src="../../img/1.jpg" alt="" style="width: 80px;
               height: 80px; ">产品slogo</h4>
            </div>
            <van-cell-group inset>
                <van-field v-model="username" name="username" left-icon="phone-o" placeholder="手机号"
                    :rules="[{ pattern, message: '请填写手机号' }]" />
                <van-field v-model="password" type="password" name="password" left-icon="lock" placeholder="密码"
                    :rules="[{ required: true, message: '请填写密码' }]" />
            </van-cell-group>
            <div style="margin: 16px;">
                <van-button block type="primary" native-type="submit" style="background: palevioletred;">
                    登录
                </van-button>
                <h2 style="color: #ccc;text-align: center;"> 立即注册 忘记密码</h2>
            </div>
        </van-form>
    </div>
</template>

<script setup>
import went from '@/components/went.vue';
let title = '登录'
import { ref } from 'vue';
const username = ref('');
const password = ref('');
// let pattern = /^1-3[9]\d{9}$/
import { loginApi } from '@/api/api'
let login = ref([])
import { useRouter } from 'vue-router';
let router = useRouter('')
import { showSuccessToast, showFailToast } from 'vant';
const onSubmit = () => {
    console.log('登录数据', username.value, password.value);
    loginApi(username.value, password.value).then(res => {
        console.log('登录数据', res);
        login.value = res.data.message
        localStorage.getItem('token', res.data.data.token)
        localStorage.getItem('username', res.data.data.username)
        if (res.data.code == 0 || password.length == 7) {
            showSuccessToast('登录成功')
             router.push('/home/my')
        } else {
            showFailToast('登录失败')
        }
    })
};
let status=ref(true)
setTimeout(()=>{
  status.value=false
},1000)
</script>

<style lang="scss" scoped></style>